Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   h1 
  span data-word="Blend" Blend 
  span data-word="Mode" Mode 
  span data-word="Overview" Overview

details
  summary Preferences
  
  form
    div
      label for="bg-light" BG Light
      input id="bg-light" type="color" value="#FFFFFF"
    div
      label for="bg-dark" BG Dark
      input id="bg-dark" type="color" value="#000000"
    div
      label for="opacity" Opacity
      input id="opacity" type="range" min="0" max="1" step="0.01" value="1"
  
ul
  - for mode in ['multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-darker', 'plus-lighter', 'normal'] do
    li
      h2 
        code #{mode}
        
      - for bg in ["light", "dark"] do
        .group class="#{bg}" style="--blend-mode: #{mode}"
          p rgb
          div style="--bg: rgb(255, 0, 0)"
          div style="--bg: rgb(0, 255, 0)"
          div style="--bg: rgb(0, 0, 255)"
        .group class="#{bg}" style="--blend-mode: #{mode};" 
          p cmy
          div style="--bg: rgb(255, 255, 0)"
          div style="--bg: rgb(0, 255, 255)"
          div style="--bg: rgb(255, 0, 255)"
 
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
:root {
  --color-00: #fafafa;
  --color-10: #7188a8;
  --color-20: color-mix(in srgb, #394351, black);
  --color-30: #14161b;
  --color-bg: var(--color-00);
  --color-fg: var(--color-30);
  @media (prefers-color-scheme: dark) {
    --color-bg: var(--color-20);
    --color-fg: var(--color-00);
  }
}

.group {
  width: 100%;
  min-width: 120px;
  aspect-ratio: 1/1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25%;

div {
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: calc(1px * infinity);
    overflow: hidden;
    mix-blend-mode: var(--blend-mode);
    background-color: var(--bg);
    transition: opacity 250ms ease-in-out;
    opacity: var(--opacity, 1);
  }

div:nth-of-type(1) {
    transform: translate(-25%, -25%);
  }
  div:nth-of-type(2) {
    transform: translate(25%, -25%);
  }
  div:nth-of-type(3) {
    transform: translate(0, 25%);
  }

p {
    position: absolute;
    z-index: 10;
    bottom: 2px;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    .light & {
      color: black;
    }
    .dark & {
      color: white;
    }
  }
}

.dark,
.light {
  transition: background 250ms ease-in-out;
}
.dark {
  background: var(--bg-dark, black);
}

.light {
  background: var(--bg-light, white);
}

body {
  min-height: 100svh;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
    source-sans-pro, sans-serif;
  margin: 0 auto;
  max-width: min-content;
  padding: 2rem 4rem;
  padding-bottom: 4rem;
  color: var(--color-fg);
  background: linear-gradient(
    in lab to top,
    color-mix(in srgb, var(--color-bg), var(--color-fg) 5%),
    var(--color-bg)
  );
  background-attachment: fixed;

@media (prefers-color-scheme: dark) {
    background: linear-gradient(
      in lab to top,
      color-mix(in srgb, var(--color-bg), black 50%),
      var(--color-bg)
    );
  }
}

@keyframes wiggle-up {
  to {
    translate: 0 0.25em;
  }
}

@keyframes wiggle-down {
  to {
    translate: 0 -0.25em;
  }
}

h1 {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  margin: 2rem;
  display: flex;
  gap: 1rem;
  text-shadow: 2px 2px 4px hsl(180 90% 10%);
  justify-content: center;

span {
    position: relative;
    color: rgb(255 0 0);

&,
    &::before,
    &::after {
      mix-blend-mode: screen;
    }

&::after,
    &::before {
      display: block;
      content: attr(data-word);
      position: absolute;
    }

&::before {
      color: rgb(0 255 0);
      top: -4px;
      animation: wiggle-up 2s ease-in-out alternate infinite;
    }
    &::after {
      color: rgb(0 0 255);
      top: 4px;
      animation: wiggle-down 2s 500ms ease-in-out alternate infinite;
    }

&:nth-of-type(1)::before {
      rotate: -4deg;
      animation-delay: 3s;
    }
    &:nth-of-type(1)::after {
      rotate: 4deg;
      animation-delay: 2s;
    }
    &:nth-of-type(3)::before {
      rotate: 2deg;
      animation-delay: 2s;
    }
    &:nth-of-type(3)::after {
      rotate: -2deg;
    }
  }
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
}

li {
  display: grid;
  margin: 0 auto;
  grid-template-areas:
    "title title title title"
    "white-rgb white-cmy black-rgb black-cmy";

gap: 25px;
  max-width: 640px;

h2 {
    grid-area: title;
    font-family: monospace;
  }

.black > :nth-of-type(1) {
    grid-area: black-rgb;
  }
  .black > :nth-of-type(2) {
    grid-area: black-cmy;
  }
  .white > :nth-of-type(1) {
    grid-area: white-rgb;
  }
  .white > :nth-of-type(2) {
    grid-area: white-cmy;
  }
}

.group,
details {
  border: 2px solid color-mix(in srgb, var(--color-10), white 90%);
  box-shadow: 0 15px 10px -10px rgb(255 255 255 / 80%),
    0 10px color-mix(in srgb, var(--color-10), hsl(180 10% 90%) 80%),
    0 12px 8px hsl(180 10% 60%), inset 0 1px 2px hsl(180 10% 70%);

@media (prefers-color-scheme: dark) {
    border: 2px solid color-mix(in srgb, var(--color-bg), #7188a8 10%);
    box-shadow: 0 10px 10px -10px hsl(180 5% 90% / 50%),
      0 10px color-mix(in srgb, var(--color-30), hsl(180 20% 20%) 80%),
      0 12px 8px hsl(180 10% 5%), inset 0 2px 2px hsl(180 10% 30%);
  }
}

details {
  margin: 4rem auto;
  background: linear-gradient(
    in lab,
    color-mix(in srgb, var(--color-bg), var(--color-fg) 10%),
    var(--color-bg)
  );
  color: var(--color-fg);
  mix-blend-mode: lighten;
  border-radius: 20px;
  padding: 1rem;
  box-sizing: border-box;

summary {
    margin: -1rem;
    padding: 1rem;
  }

form {
    margin: 1rem;
    padding: 1rem;
    display: flex;
    border-radius: 10px;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 2rem;
    border: 1px solid color-mix(in srgb, var(--color-bg), white 10%);
    background: linear-gradient(
      in lab to top,
      var(--color-bg),
      color-mix(in srgb, var(--color-bg), hsl(180 90% 10%) 10%)
    );
    box-shadow: 0px 1px 3px inset hsl(180 20% 40%);

@media (prefers-color-scheme: dark) {
      border: 1px solid color-mix(in srgb, var(--color-bg), black 40%);
      background-color: color-mix(in srgb, var(--color-bg), black 2%);
    }

div {
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
      min-width: 150px;
    }
  }
}

Frontend Forever App